/**
 * 头部带菜单控件
 */
Vue.component('top-menu', {
    props: {
        index: {
            type: String,
            default: "index.html"
        }
    },
    data: function () {
        var repasswordValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请重复一次新密码'));
            } else if (value !== this.userForm.password) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        return {
            changePwdDialogVisible: false,
            formLoading: false,
            isLogin: sessionStorage.getItem("token"),
            user: sessionStorage.getItem("user"),
            userForm: {
                username: sessionStorage.getItem("user"),
                oldPwd: "",
                password: "",
                repeatPwd: "",
                token: sessionStorage.getItem("token")
            },
            userRules: {
                oldPwd: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 4, max: 24, message: '长度在 4 到 24 个字符', trigger: 'blur' }
                ],
                repeatPwd: [
                    { required: true, message: '请重复一次新密码', trigger: 'blur' },
                    { validator: repasswordValidator, trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        selected: function (index, indexPath) {
            index = index === 'index.html' ? '/' : '/' + index

            if (index === '/logout') {
                this.logout()
                // window.location.href = "/"
                return
            }

            if (index === '/myself') {
                this.changePwdDialogVisible = true
                return
            }

            window.open(index, '_self');
        },

        logout() {
            var params = new URLSearchParams()
            params.append('token', sessionStorage.getItem("token"))
            axios.post('/logout',params).then(res => {
                if (res.data) {
                    let data = res.data;
                    if (data.code === 0) {
                        this.$message.success("注销成功");
                        sessionStorage.removeItem("user")
                        sessionStorage.removeItem("token")
                        this.isLogin = sessionStorage.getItem("token")
                        this.user = sessionStorage.getItem("user")
                        //跳转到首页
                        window.open("/", '_self');
                    } else {
                        this.$message.error(data.msg);
                    }
                }
            });

        },

        //提交
        submitChangePwd() {
            this.$refs["userForm"].validate((valid) => {
                if (valid) {
                    this.setUserInfo()
                } else {
                    return false;
                }
            });
        },

        //设置用户密码
        setUserInfo() {
            this.formLoading = true
            axios.post(
                '/user/changepwd',
                Qs.stringify(this.userForm),
            ).then(res => {
                this.formLoading = false
                if (res.data) {
                    let data = res.data;
                    if (data.code === 0) {
                        //重新加载
                        this.$message.success("更新密码成功");
                        this.changePwdDialogVisible = false
                    } else {
                        this.$message.error(data.msg);
                    }
                }
            }).catch(onError);
        },

    },
    template: `
        <div class="nav-content">
            <el-menu :default-active="index" @select="selected" mode="horizontal" >
                <el-menu-item index="index.html">
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="square.html" v-if="isLogin">
                    <span slot="title">视频广场</span>
                </el-menu-item>
                <el-menu-item index="streams.html" v-if="isLogin">
                    <span slot="title">在线流列表</span>
                </el-menu-item>
                <el-menu-item index="devices.html" v-if="isLogin">
                    <span slot="title">设备管理</span>
                </el-menu-item>
                <el-menu-item index="sys/server.html" v-if="isLogin">
                    <span slot="title">系统管理</span>
                </el-menu-item>
                <el-menu-item index="sdk.html" v-if="isLogin">
                    <span slot="title">SDK</span>
                </el-menu-item>
                <el-submenu index="user" v-if="isLogin">
                    <template slot="title">{{user}}</template>
                    <el-menu-item index="myself">修改密码</el-menu-item>
                    <el-menu-item index="logout">注销</el-menu-item>
                </el-submenu>
                <el-menu-item index="login.html" v-else>
                    <span slot="title">登录</span>
                </el-menu-item>
            </el-menu>
            
            <el-dialog title="修改密码" :visible.sync="changePwdDialogVisible">
                <el-form :model="userForm" ref="userForm" :rules="userRules" label-width="100px"
                         v-loading="formLoading">
                    <el-form-item label="用户名">
                        <el-input v-model="userForm.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="旧密码" prop="oldPwd">
                        <el-input v-model="userForm.oldPwd" autocomplete="off" placeholder="旧密码" clearable show-password></el-input >
                    </el-form-item>
                    <el-form-item label="新密码" prop="password">
                        <el-input v-model="userForm.password" autocomplete="off" placeholder="新密码" clearable show-password></el-input >
                    </el-form-item>
                    <el-form-item label="重复新密码" prop="repeatPwd">
                        <el-input v-model="userForm.repeatPwd" autocomplete="off" placeholder="重复新密码" clearable show-password></el-input >
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="changePwdDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitChangePwd" :disabled="formLoading">修 改</el-button>
                </span>
            </el-dialog>
        </div>
    `
});